<template>
	<div class="box">
		<div class="title_box">
			<div class="title_box_left">
				<img src="@/assets/home/title-icon.png" alt="">
				<p>农技问答</p>
			</div>
			<div>
				<p @click="goback">返回</p>
			</div>
		</div>
		<div class="essayList">
			<li>
				<img src="@/assets/home/ask.png" alt="">
				<p>{{dataList.list.question}}</p>
			</li>
			<li>
				<img src="@/assets/home//reply.png" alt="">
				<span>
					{{dataList.list.answer}}
				</span>
			</li>
			<div v-if="dataList.list.attachmentList.length">
				<img :src="src" alt="" v-for="(src,i) in dataList.list.attachmentList">
			</div>
		</div>
	</div>
</template>

<script setup>
	import { getQuestionAnswer } from '../../api/home.js'
	import { reactive, onBeforeMount } from 'vue';
	import { useRouter } from 'vue-router'
	const router = useRouter()
	const dataList = reactive({
		list:'',
		id:''
	})
	onBeforeMount(() => {
		dataList.id = router.currentRoute.value.query.id
		getDetail(router.currentRoute.value.query.id)
	})
	const getDetail = (id) => {
		var data = {
			params: id
		}
		getQuestionAnswer(data).then(res=> {
			console.log(res)
			dataList.list = res.data
		})
	}
	const goback = () => {
		router.back()
	}
</script>

<style lang="scss" scoped>
	.title_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	
		&_left {
			display: flex;
			align-items: center;
	
			img {
				width: 55px;
			}
	
			p {
				font-size: 34px;
				font-weight: 600;
				color: #11918E;
				margin-left: 10px;
			}
		}
		p{
			color: #11918E;
			cursor: pointer;
		}
	}
	.box{
		width: 1200px;
		margin: 30px auto;
		background-color: #FFFFFF;
		border-radius: 10px;
		padding: 30px;
		margin-top: 30px;
		min-height: 430px;
	}
	.essayList {
		width: 1140px;
		background: #FFFFFF;
		border-radius: 10px 10px 10px 10px;
		opacity: 1;
		border: 1px solid rgba(17, 145, 142, 0.1);
		padding: 15px;
		margin-top: 30px;
		height: max-content;
	
		li {
			display: flex;
	
			img {
				width: 30px;
				height: 30px;
				margin-right: 12px;
			}
		}
	
		li:last-child {
			margin-top: 16px;
		}
		div{
			display: flex;
			flex-direction: column;
			justify-content: center;
			img{
				width: 100%;
				margin-top: 15px;
			}
		}
	}
</style>